<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html lang="en">
<head>
	<%@ include file="/commons/global.jsp"%>
	<title>待办任务列表</title>
	<!-- 样式文件的引入 -->
	<link href="${ctx}/commons/css/style.css" rel="stylesheet" type="text/css"/>
	<link rel="stylesheet" type="text/css" href="${ctx}/commons/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${ctx}/commons/themes/icon.css">
	<!-- jqueryUI JS文件的引入 -->
	<script type="text/javascript" src="${ctx}/commons/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="${ctx}/commons/js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${ctx}/commons/js/easyui-extends-validate.js"></script>
	<!-- jqueryUI国际化 -->
	<script type="text/javascript" src="${ctx}/commons/js/easyui-lang-zh_CN.js"></script>
	<!-- 开发使用的公用js方法 -->
	<script type="text/javascript" src="${ctx}/commons/js/common.js"></script>
	<!-- 开发国际化的引用，主要完成后台信息在前台提示的国际化，一定要放在最后 -->
	<script type="text/javascript">var ctx = '${ctx}';var actionExt = "action";var i18n = new Object();</script>
	<script src="${ctx}/commons/js/i18n/message_zh_CN.js" type="text/javascript"></script>
</head>
<body>
	
	<table id="forkeytasklist" width="100%" class="need-border">
		<thead>
			<tr>
				<th>任务ID</th>
				<th>任务Key</th>
				<th>任务名称</th>
				<th>流程定义ID</th>
				<th>流程实例ID</th>
				<th>优先级</th>
				<th>任务创建日期</th>
				<th>任务逾期日</th>
				<th>任务描述</th>
				<th>任务所属人</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody align="center">
			<c:forEach items="${page.result }" var="task">
			<tr>
				<td>${task.id }</td>
				<td>${task.taskDefinitionKey }</td>
				<td>${task.name }</td>
				<td>${task.processDefinitionId }</td>
				<td>${task.processInstanceId }</td>
				<td>${task.priority }</td>
				<td>${task.createTime }</td>
				<td>${task.dueDate }</td>
				<td>${task.description }</td>
				<td>${task.owner }</td>
				<td>
					<c:if test="${empty task.assignee }">
						<a class="claim" href="${ctx }/form/formkey/task/claim/${task.id}">签收</a>
					</c:if>
					<c:if test="${not empty task.assignee }">
						<%-- 此处用tkey记录当前节点的名称 --%>
						<a class="handle" tkey='${task.taskDefinitionKey }' tname='${task.name }' tid='${task.id }' href="#">办理</a>
					</c:if>
				</td>
			</tr>
			</c:forEach>
		</tbody>
	</table>
	

	<!-- 办理任务对话框 -->
	<div id="handleTemplate" class="template"></div>

</body>

<script type="text/javascript">
	var d;
	/**
	 * 动态Form办理功能
	 */
	$(function() {
		$('.handle').click(readForm);
		
	});
	
	/**
	 * 打开办理对话框
	 * 读取流程启动表单
	 */
	function readForm() {
		// 当前节点的英文名称
		var tkey = $(this).attr('tkey');
		
		// 当前节点的中文名称
		var tname = $(this).attr('tname');
		
		// 任务ID
		var taskId = $(this).attr('tid');
		var dialog = $("#handleTemplate");
		//alert(processDefinitionId);
		// 读取启动时的表单
		$.get('${ctx}/form/formkey/get-form/task/' + taskId, function(form) {
			// 获取的form是字符行，html格式直接显示在对话框内就可以了，然后用form包裹起来
			
			var html="<form class='formkey-form' method='post' action='${ctx}/form/formkey/task/complete/"+ taskId+"'>";
			html+=form+"</form";
			$(dialog).html(html);

			var $form = $('.formkey-form');

			// 设置表单action 和表格样式 、时间控件
			//$form.attr('action', '${ctx}/form/formkey/test');
			$form.find("table").attr("class","infoTable")
			$form.find('.datetime').datetimebox({showSeconds:false});//attr("class","easyui-datetimebox");//
			
			// 表单验证
			//$form.validate($.extend({}, $.common.plugin.validator));
			
			if(d!=null){
				d.dialog("open");
				return;
			}
			
			d=$('#handleTemplate').dialog({
	                title: '完成任务',
				    iconCls:'icon-add',
				    width: 700,    
				    height: 520,    
				    closed: false,    
				    cache: false,  
	                modal: true,
	                buttons: [{
	                    text: '提交',
	                    iconCls: 'icon-ok',
	                    handler: function () {
	                        //提交表单
	                        $('#handleTemplate').dialog('close');
	                        submitProcessForm();
	                    }
	                }, {
	                    text: '取消',
	                    iconCls: 'icon-cancel',
	                    handler: function () {
	                        $('#handleTemplate').dialog('close');
	                    }
	                }]
	        });
			
		});
	}
	
	//提交表单
	function submitProcessForm(){
		//alert($('.formkey-form').attr("action"));
		//$('.formkey-form').submit();

		$.ajax({
			type: "post",
			timeout:20000,
			url:$('.formkey-form').attr("action"),
			data:$(".formkey-form").serialize(),
			success: function(data){
				top.$.messager.alert('提示',"任务完成成功",'info',function(){window.location.href="${ctx}/form/formkey/task/list"});
			},
			error:function(data){
				alert(2);
			}
		});
	}

</script>
</html>
